<template>
  <div class="top">
    <!-- 博客标题 -->
    <div class="top-title animate__animated animate__lightSpeedInLeft">
      <!-- 标题小图标 -->
      <span class="title-span">
        <Svgs ids="#icon-bokeblogger3" style="font-size: 33px"></Svgs>
      </span>
      <!-- 文字 -->
      <span class="title-name">
        <a href="#" style="color: black"> 小唐博客 </a>
      </span>
    </div>
    <!-- 菜单 -->
    <div class="top-menu">
      <div class="menu">
        <ul class="menus animate__rubberBand" >
          <li
            :class="{ 'menu-item': true, active: crunteIndex == index ,'animate__animated animate__rubberBand':true}"
            v-for="(item,index) in blogMenus"
            :key="index"
          >
            <el-dropdown>
              <!-- v-if="item.xiala.length != 0" -->
              <el-dropdown-menu slot="dropdown"  >
                <el-dropdown-item v-for="(item1,index1) in item.xiala" :key="index1" >{{ item1 }}</el-dropdown-item>
            
              </el-dropdown-menu>
            
            <a  @click.prevent="clickLi($event,item.title)" href="#" :dianIndex="index"
              >{{ item.title}}
              <i class="daIcon"><Svgs :ids="item.icon"></Svgs></i
              ><i class="jiantou"><Svgs ids="#icon-xia"></Svgs></i
            ></a>
            </el-dropdown>
          
            <span class="abs"></span>
          </li>
        </ul>
      </div>
    </div>
    <!-- 搜索 -->
    <div class="top-seacher">
      <div class="seacher-item">
        <div class="seacher-i">
          <div class="seacher-input">
            <span>
              <el-input
                style="width: 72%"
                placeholder="请输入内容"
                v-model="input"
                clearable
              >
              </el-input>
            </span>
            <span>
              <el-button type="primary" icon="el-icon-search">搜索</el-button>
            </span>
          </div>
        </div>
      </div>
    </div>
    <!-- 登录 -->
    <div class="top-login">
      <div class="user-login-info" v-if="userId != 0"> 
          <el-dropdown  @command="handleCommand">
              <!-- <el-button> </el-button> -->
              <el-dropdown-menu slot="dropdown" style="margin-top:-8px">
                <span @click="toPersonal"><el-dropdown-item command="userinfo" > 个人中心 <Svgs ids="#icon-xia"></Svgs></i></el-dropdown-item></span>
                
                 <el-dropdown-item command="outLogin">退出登录 <Svgs  ids="#icon-xia"></Svgs></i></el-dropdown-item>
              
            
              </el-dropdown-menu>
              <div class="info">
                <!-- <img :src="require(userInformation.userImg)" alt=""> -->
                <img :src="userInformation.userImg" alt="">
                <span style="padding-right: 5px;">{{userInformation.userName}}</span>
              <i class="daIcon"><Svgs ids="#icon-gerenzhongxin"></Svgs></i
              ><i class="jiantou"><Svgs ids="#icon-xia"></Svgs></i
            ></div>
          </el-dropdown>
      </div>
       <!-- 登录注册按钮 -->
      <div class="login-btn" v-if="userId == 0">
       
        <span @click="isshow">
           <router-link to="/register">
          <el-row>
            <el-button round size="small">注册</el-button>
          </el-row>
          </router-link>
        </span>
        <span @click="isshow">
          <router-link to="/login" >
           <el-row>
            <el-button round size="small">登录</el-button>
          </el-row></router-link>
         
        </span>
      </div>
    </div>
  </div>
</template>

<script>

import Svgs from "@/components/svg/svg.vue";
import pubsub from "pubsub-js";
import axios from "axios";
export default {
  name: "Top",
  components: {
    Svgs,
  },
  data() {
    return {
      crunteIndex: 0,
      input: "",
      blogMenus: [
        { title: "首页", icon: "#icon-shouye", tolink: "/", xiala: [] ,link:"/home"},
        { title: "面试题", icon: "#icon-tiku", xiala: ["java", "spring"],link:"/home" },
        {
          title: "心情随笔",
          icon: "#icon-bianjisuibi",
          xiala: ["今日笔记", "生活分享"],
          link:"/home" ,
          clickFun:"dian"
        },
        {
          title: "错误笔记",
          icon: "#icon-biji",
          xiala: ["mysql问题", "spring问题"],
          link:"/home" 
        },
        {
          title: "技术分类",
          icon: "#icon-kexuejishu-",
          xiala: ["java", "vue", "redis", "spring"],
          link:"/home" 
        },
        { title: "BUG", icon: "#icon-bug", xiala: [],link:"/home"  },
        { title: "学习", icon: "#icon-xuexi", xiala: [],link:"/home"  },
        { title: "时间轴", icon: "#icon-shijian", xiala: [],link:"/home"  },
      ],
      userId: this.$store.state.user,
      userInformation: {},
    };
  },
  mounted() {
    this.selectUserInfo(this.userId);

    this.pub();
    this.unloginUser()
  },
  methods: {
    toPersonal(){
      
      this.$router.push({
        name:"Personal"
      })
    },
    //订阅信息用户推出登录
    unloginUser(){
      pubsub.subscribe("unlogin",(item,data)=>{
          this.userId = data
      })
    },
    // 查询用户信息
    selectUserInfo(item) {
      if (this.userId != 0) {
        const that = this;
        //拿到用户的id查询用户的信息
        axios
          .post("/aabbcc/user/selectUserById/" + item)
          .then(function (response) {
            that.userId = response.data.obj.userId;
            that.userInformation = response.data.obj;
          });
      }
    },
    pub() {
      pubsub.subscribe("usersinfo", (pubname, data) => {
        const that = this;
        //拿到用户的id查询用户的信息
        axios
          .post("/aabbcc/user/selectUserById/" + data)
          .then(function (response) {
            that.userId = response.data.obj.userId;
            that.userInformation = response.data.obj;
          });
      });
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    clickLi(e,item) {
      this.crunteIndex = e.target.getAttribute("dianIndex");
      //判断状态调用不同的方法查询数据
      if(item == "首页"){
        //通过发布消息到展示页面articlejiegou.vue
            pubsub.publish("articleInfos","articles")
            this.tohome()
      }else if(item == "心情随笔"){
           //通过发布消息到展示页面articlejiegou.vue
            pubsub.publish("articleInfos","moodEssayArticle")
            this.tohome()
      }else if(item == "面试题"){
            //通过发布消息到展示页面articlejiegou.vue
            pubsub.publish("articleInfos","intervievArticle")
            this.tohome()
      }else if(item == "错误笔记"){
          //通过发布消息到展示页面articlejiegou.vue
          pubsub.publish("articleInfos","erroNoteArticle")
          this.tohome()
      }else if(item == "BUG"){
           //通过发布消息到展示页面articlejiegou.vue
          pubsub.publish("articleInfos","bugArticle")
          this.tohome()
      }else if(item == "时间轴"){
          this.$router.push({
            name:"articleTimeline"
          })
      } 
    },
   
  tohome(){
     this.$router.push({
          name:"homes"
        })
  },
    isshow() {
      //发布信息
      pubsub.publish("loginandregister", true);
    },
    handleCommand(command) {
      if (this.userId != 0) {
        if (command == "outLogin") {
          const that = this;
          //退出登录
          axios({
            method: "post",
            url: "/aabbcc/user//loginOut",
            headers: {
              token: localStorage.getItem("token"),
            },
          }).then(function (response) {
            if (response.data.code == 200) {
              that.open2("退出成功")
              localStorage.removeItem("vuex");
              localStorage.removeItem("token");
              // localStorage.removeItem("tokenTime");
              that.userId = 0;
              that.selectUserInfo = {};
              //去首页
              that.$router.push({
                name:"home"
                // name:"home"
              })
            }
          });
        }
        if (command == "userinfo") {
          // alert("个人中心");
        }
      } else {
        alert("用户信息有误");
      }
    },
       open4(message) {
      //错误提示框
      this.$message({
        showClose: true,
        message: message,
        type: "error",
      });
    },
    open2(message) {
      //成功提示框
      this.$message({
        showClose: true,
        message: message,
        type: "success",
      });
    },
  },
};
</script>

<style scoped>
/* 登录信息div */
.user-login-info {
  width: 100%;
  height: 100%;
}
.info {
  position: relative;
  margin: 0 auto;
  line-height: 50px;
}
.info i {
  position: absolute;
  right: 0;
}
.info .jiantou {
  top: 12px;
  opacity: 0;
  transition: 0.5s;
}
.info .daIcon {
  transition: 0.5s;
}

.info:hover .daIcon {
  transform: scale(0.7) translateY(-6px) translateZ(0) !important;
  transition: 0.5s;
  opacity: 1;
}
.info:hover .jiantou {
  transform: scale(1.3) translateY(-4px) translateZ(0) !important;
  transition: 0.5s;
  opacity: 1;
}
.info img {
  position: relative;
  width: 40px;
  border-radius: 50%;
  /* margin-top: -16px; */
  top: -3px;
  margin-left: 11px;
  height: 40px;
  border: 2px solid #ccc;
}
.info span {
  cursor: pointer;
  display: inline-block;
  width: 109px;
  padding-right: 5px;
  margin-left: 10px;
  /* line-height: 63px; */
  position: relative;
  top: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.top {
  width: 78.9%;
  min-width: 1502px;
  height: 55px;
  position: relative;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
a {
  color: black;
}
/*  博客标题 */
.top .top-title {
  width: 10%;
  height: 100%;
}

.top-title .title-span {
  /*标题小图标 */
  position: absolute;
  line-height: 64px;
}

.top-title .title-name {
  /* 文字 */
  font-size: 22px;
  font-weight: 600;
  position: absolute;
  left: 43px;
  line-height: 49px;
}

/* 菜单 */
.top .top-menu {
  width: 52%;
  height: 100%;
}
.menu .menus {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.menu .menus .menu-item {
  line-height: 55px;
  position: relative;
}
.menu-item a {
  position: relative;
  font-size: 16px;
}
.menu-item a:hover {
  color: #2882c5;
}
.menu-item a .daIcon {
  position: absolute;
  right: -22px;
  top: -15px;
  transition: 0.5s;
}
.menu-item a .jiantou {
  position: absolute;
  top: -2px;
  right: -22px;
  opacity: 0;
  transition: 0.5s;
}
.active {
  border-bottom: 2px solid #2882c5;
}
.active a {
  color: #2882c5;
  font-weight: 600;
}
.menu-item a svg {
  width: 20px;
}
.abs {
  display: inline-block;
  width: 100%;
  height: 2px;
  background-color: #2882c5;
  position: absolute;
  bottom: 0;
  left: 0;
  opacity: 0;
  transform: scaleX(0);
  transition: all 0.5s linear;
}
.menu-item:hover a .daIcon {
  transform: scale(0.7) translateY(-6px) translateZ(0) !important;
  opacity: 1;
}
.menu-item:hover a .jiantou {
  transform: scale(1.3) translateY(-4px) translateZ(0) !important;
  opacity: 1;
}

.menu-item:hover > .abs {
  transform: scaleX(1);
  transition: all 0.5s linear;
  opacity: 1;
}
.menu-item:hover {
  border-bottom: 0px;
}

/* 搜索 */
.top .top-seacher {
  width: 25%;
  height: 100%;
}
.top-seacher .seacher-item {
  width: 100%;
  height: 100%;
}
.top-seacher .seacher-item .seacher-i {
  width: 100%;
  height: 36px;
  margin-top: 9px;
  position: relative;
}
.top-seacher .seacher-item .seacher-i .seacher-input {
  width: 91%;
  height: 100%;
  display: inline-block;
  position: absolute;
  right: -7px;
}

/* 登录 */
.top .top-login {
  width: 13%;
  height: 100%;
}
.top .top-login .login-btn {
  width: 100%;
  height: 36px;
  margin-top: 12px;
}
.login-btn span {
  width: 56px;
  display: inline-block;
  margin-left: 11px;
}

.seacher-input span  .el-button{
  border-radius: 0 4px 4px 0 !important;
}
.seacher-input span .el-input > input{
   border-radius: 4px 0 0 4px !important;
}
</style>    


